<template>
  <div class="wms flex">
    <!-- 侧边栏组件 -->
    <!-- <Aside></Aside>
    <div :class="store.state ? 'bodyw1' : 'bodyw'"> -->
    <!-- 导航栏组件 -->
    <!-- <Nav></Nav> -->
    <div class="bodybox">
      <el-row class="cardBox" :gutter="10">
        <el-col :xl="18" :lg="18" :md="24" :sm="24" :xs="24">
          <el-row :gutter="10">
            <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24">
              <div class="chartBox" ref="chartBox">
                <div
                  class="chart"
                  ref="chart"
                  style="width: 100%; height: 100%"
                >
                  占位
                </div>
              </div>
            </el-col>
            <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
              <el-card class="box-card">
                <template #header>
                  <div class="header">
                    <p class="pointer" @click="switchTime('weekly')">
                      Weekly Total
                    </p>
                  </div>
                </template>
                <div>
                  <el-icon class="icon"><DataLine /></el-icon>
                </div>
                <div class="card-p">
                  <p class="pointer" @click="switchTime('weekly')">
                    IM-warehousing： &nbsp; 100
                  </p>
                  <p class="pointer" @click="switchTime('weekly')">
                    EX-warehouse&nbsp;： &nbsp; 100
                  </p>
                </div>
              </el-card>
              <el-card class="box-card">
                <template #header>
                  <div class="header">
                    <p class="pointer" @click="switchTime('monthly')">
                      Monthly Total
                    </p>
                  </div>
                </template>
                <div>
                  <el-icon class="icon"><DataLine /></el-icon>
                </div>
                <div class="card-p">
                  <p class="pointer" @click="switchTime('monthly')">
                    IM-warehousing： &nbsp; 100
                  </p>
                  <p class="pointer" @click="switchTime('monthly')">
                    EX-warehouse&nbsp;： &nbsp; 100
                  </p>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <el-col :span="24">
            <el-form :model="form" inline>
              <!-- <el-form-item label="">
                <el-radio-group v-model="state" @change="stateChange">
                  <el-radio label="1" size="large">入库</el-radio>
                  <el-radio label="2" size="large">出库</el-radio>
                </el-radio-group>
              </el-form-item> -->
              <el-form-item label="用户">
                <el-cascader
                  class="UserCascader"
                  v-model="user"
                  :options="userOptions"
                  :props="props"
                  @change="handleUserChange"
                />
              </el-form-item>
              <el-form-item label="时间">
                <el-date-picker
                  class="datePicker"
                  v-model="time"
                  type="daterange"
                  range-separator="To"
                  start-placeholder="Start date"
                  end-placeholder="End date"
                  size="default"
                  @change="timeChange"
                />
              </el-form-item>
              <el-form-item label="" size="normal">
                <el-button type="primary" size="default" @click="showIM">
                  入库
                </el-button>
              </el-form-item>
              <el-form-item label="" size="normal">
                <el-button type="primary" size="default" @click="">
                  出库
                </el-button>
              </el-form-item>
            </el-form>
            <el-table :data="wareList" border stripe height="55vh">
              <el-table-column type="selection" width="55" />
              <el-table-column
                label="采购"
                prop="meta_description"
                show-overflow-tooltip
              />
              <el-table-column
                label="入库数"
                prop="meta_description"
                show-overflow-tooltip
              />
              <el-table-column
                label="出库数"
                prop="meta_description"
                show-overflow-tooltip
              />
              <el-table-column fixed="right" label="操作" width="65">
                <template #default="{ row }">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <el-icon><MoreFilled /></el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="handleDetail(row)">
                          仓库明细
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-col>
        <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24">
          <div style="width: 100%; height: 100%">占位</div>
        </el-col>
      </el-row>
    </div>
    <!-- </div> -->
    <detailsVue ref="details" />
    <im-warehousing ref="im" />
  </div>
</template>
<script setup>
import { ref, onMounted, onUpdated, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts";
import * as api from "../../api2/index";
// import {
//   Document,
//   Menu as IconMenu,
//   Location,
//   Setting,
// } from "@element-plus/icons-vue";
// pinia
import { useDemoStore } from "../../pinia/index";
import detailsVue from "./components/details.vue";
import imWarehousing from "./components/IM_warehousing.vue";
let token = useDemoStore().token;
const store = useDemoStore();

//时间选择器
const time = ref("");
const timeChange = () => {
  //切换时间
  console.log(time);
};
const switchTime = (time) => {
  console.log(time);
  //切换周或月时间
};

//用户选择器
const user = "";
const userOptions = ref([]);
const props = {
  expandTrigger: "hover",
};
const getPurchaseList = () => {
  api
    .getPurchaseList({
      token: token,
    })
    .then((res) => {
      userOptions.value = res.data;
      console.log(userOptions);
    });
};
const handleUserChange = (value) => {
  //切换用户
  console.log(value);
};

//入库or出库
// const state = ref("1");
// const stateChange = () => {
//   //切换状态
//   console.log(state);
// };
const im = ref();
const showIM = () => {
  im.value.show();
};
//入库or出库详细列表
const wareList = ref([
  {
    meta_description: "暂无数据",
  },
]);
const pageNo = ref(1);
const pageSize = ref(25);
const getWareList = () => {
  api.getWareList().then((res) => {
    console.log(res);
  });
};

const details = ref();
const handleDetail = () => {
  console.log("Detail");
  details.value.show();
};
//统计图
const chartBox = ref();
const chart = ref();
const myEcharts = () => {
  let myChart = echarts.init(chart.value);
  let option;
  myChart.setOption(
    (option = {
      title: {
        text: "库存情况",
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "10%",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          show: true,
          type: "cross",
          axis: "auto",
        },
      },
      legend: {
        data: ["出库", "入库"],
      },
      toolbox: {
        feature: {
          restore: {},
          dataZoom: {
            yAxisIndex: false,
          },
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "2023-01-01",
          "2023-01-02",
          "2023-01-03",
          "2023-01-04",
          "2023-01-05",
          "2023-01-06",
          "2023-01-07",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "出库",
          type: "line",
          smooth: true,
          data: [10, 12, 21, 54, 260, 830, 710],
        },
        {
          name: "入库",
          type: "line",
          smooth: true,
          data: [30, 182, 434, 791, 390, 30, 10],
        },
      ],
    })
  );

  setTimeout(function () {
    myChart.resize();
    window.onresize = function () {
      myChart.resize();
    };
  }, 200);
};

onMounted(() => {
  getPurchaseList();
  myEcharts();
});
onUpdated(() => {});
</script>
<style lang="less" scoped>
.pointer {
  cursor: pointer;
}
.wms {
  height: 100vh;
  box-sizing: border-box;
  background-color: #f1f1f1;
  overflow: hidden;
  .bodyw {
    width: 87.5%;
    transition: 0.3s ease;
  }
  .bodyw1 {
    width: 95%;
    transition: 0.3s ease;
  }
  .bodybox {
    width: 100%;
    box-sizing: border-box;
    height: 91vh;
    padding: 0px 16px;
    overflow: auto;
    .cardBox {
      .chartBox {
        height: 100%;
        min-height: 240px;
      }

      .el-form-item {
        margin-bottom: 4px;
      }
      .box-card {
        margin-bottom: 4px;
        /deep/ .el-card__header {
          padding: calc(0.8rem);
        }
        /deep/ .el-card__body {
          padding: calc(0.8rem);
        }
        div {
          display: inline-block;
        }
        .header {
          font-size: 22px;
          line-height: 18px;
        }
        .icon {
          font-size: 56px;
          line-height: 64px;
          color: #409eff;
          margin-right: 30px;
          margin-left: 16px;
        }
        .card-p {
          font-size: 18px;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
